<template>
	<view class="show-file"><!-- @click="back" -->
		<image v-if="file.type === 'image'" :src="file.url" mode="aspectFill"></image>
		<video v-else-if="file.type === 'video'" :src="file.url"></video>
		<!-- <view v-else-if="file.type === 'audio'">
			<audio :src="file.url" class="file-type-img" @error="onError"></audio>
		</view> -->
		<view v-else class="other">
			<image class="file-type-img" :src="icons.filetype" mode="aspectFill" />
			<text class="flie-type-text"> 该文件暂不支持在线查看 </text>
		</view>

		<view class="file-info">
			<view class="func-bar">
				<u-icon @click="downloadFile(file.url)" name="download" label="下载" color="white" label-color="white"></u-icon>
			</view>
			<text class="info-name"> 文件名： {{ file.name }} </text>
			<!-- <text class="info-desc">{{ file }} </text> -->
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			icons: {
				// add: require('./static/icon-add.png'),
				filetype: './icon-file.png',
			},
			file: {
				url: '',
				name: '',
				type: 'image'
			}
		};
	},
	onLoad(options) {
		if (options.file) {
			this.file = JSON.parse(options.file)
		}
	},
	methods: {
		changeSwiper(e) {
			this.currentImg = e.detail.current;
		},
		back() {
			if (this.isPop) {
				this.isPop = false
				return
			}
			try {
				this.$Router.back(1);
			} catch (e) {
				uni.navigateBack();
			}
		},
		onError(e) {
			console.error("onError", e);
		},
		/** 附件下载 */
		async downloadFile(url) {
			const res = await uni.showModal({
				title: '提示',
				content: '确定下载文件吗?'
			});
			if (!res.confirm) return;
			uni.showLoading({ title: '下载中' });
			// #ifdef H5
			// this.isLoading = true;
			let oA = document.createElement("a");
			// 设置下载的文件名，不设置就是默认的
			oA.download = '';
			// 图片下载链接
			oA.href = url;
			document.body.appendChild(oA);
			oA.click();
			oA.remove(); // 下载之后把创建的元素删除
			uni.hideLoading();
			// this.isLoading = false;
			// #endif
			uni.downloadFile({
				url: url,//下载地址接口返回
				success: (data) => {
					if (data.statusCode === 200) {
						//文件保存到本地
						uni.saveFile({
							tempFilePath: data.tempFilePath, //临时路径
							success: function (res) {
								uni.hideLoading();
								uni.showToast({
									icon: 'none',
									mask: true,
									title: '文件已保存：' + res.savedFilePath, //保存路径
									duration: 3000,
								});
								setTimeout(() => {
									//打开文档查看
									uni.openDocument({
										filePath: res.savedFilePath,
										success: function (res) {
											console.log('打开文档成功');
										}
									});
								}, 3000)
							}
						});
					}
				},
				fail: (err) => {
					console.log(err);
					uni.hideLoading();
					uni.showToast({
						icon: 'none',
						mask: true,
						title: '失败请重新下载',
					});
				},
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.show-file {
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;

	.other {
		display: flex;
		flex-direction: column;
		justify-self: center;
		align-items: center;

		.file-type-img {
			height: 100px;
			width: 100px;
			// background-color: lightgray;
		}

		.flie-type-text {
			color: grey;
			display: block;
			padding-top: 10px;
		}
	}

	.file-info {
		background-color: rgba(45, 45, 45, 0.752);
		width: 750rpx;

		min-height: 10vh;
		position: fixed;
		bottom: 0;
		left: 0;
		box-sizing: border-box;
		color: white;
		display: flex;
		flex-direction: column;

		text {
			padding: 10px;
		}

		.func-bar {
			display: flex;
			flex-direction: row;
			background-color: rgba(45, 45, 45, 0.752);
			padding: 10px;

		}
	}
}
</style>
